<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <title>并夕夕</title>
    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <style>
        /*元素选择器*/

        html {
            height: 100%;
        }

        body {
            height: 100%;
            padding: 0px;
            /*内边距*/
            margin: 0px;
            /*外边距*/
        }

        .并夕夕 {
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- div ：矩形区域 -->
    <div id="app">

        <wv-header title="并夕夕" :fixed="false" background-color="#ff0033">
        </wv-header>

        <wv-swipe :height="130" :autoplay="4000">
            <wv-swipe-item v-for="pic in pics">
                <img :src="pic.picadd" height="150" width="400">
            </wv-swipe-item>
        </wv-swipe>

        <div>
            <wv-search-bar :autofocus="false" v-model="p_search" @search="onSearch" @cancel="onCancel" />
        </div>

        <div>
            <wv-grid >
                <wv-grid-item @click="onClick(dep)"  v-for="dep in deps">
                    <img :src="dep.s_add" slot="icon">
                    <span slot="label">{{dep.s_spe}}</span>
                </wv-grid-item>
            </wv-grid>
        </div>

        <wv-tabbar>
            <wv-tabbar-item>
                <i class="fa fa-shopping-cart" @click="basket"></i>
                <br />购物车
            </wv-tabbar-item>

            <wv-tabbar-item @click="onPerson">
                <i class="fa fa-user"></i>
                <br />{{UserName}}
            </wv-tabbar-item>
        </wv-tabbar>
    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    //Vue对象的作用就是渲染界面,需要绑定一个元素
    new Vue({
        el: '#app',
        data: {
            p_search: '',
            defaultResult: [],
            emps: [],
            deps: [],
            pics: [],
            UserName: '',
        },
        methods: {
            onSearch() {
                Serv.loadText({
                    url: '/setCondition.jsp',
                    data: { p_search: this.p_search }
                }, () => {
                    window.location.href = 'page.html';
                });
            },
            onCancel() {
                // 自定义取消事件处理
            },
            onClick(dep) {
                Serv.loadText({
                    url: '/setCondition.jsp',
                    data: { p_search: dep.s_spe }
                }, () => {
                    window.location.href = 'page.html';
                });
            },
            onPerson() {
                window.location.href = 'person.html';
            },
            basket() {
                window.location.href = 'basket.html';
            },
            loadList() {
                Serv.loadData({ url: '/cell.jsp' }, (deps) => {
                    this.deps = deps;
                });
            },
            loadpic() {
                Serv.loadData({ url: '/picture.jsp' }, (pics) => {
                    this.pics = pics;
                });
            },

        },
        mounted() {
            Serv.loadText({ url: '/name.jsp' }, (data) => {
                this.UserName = data;
            });
            this.loadList();
            this.loadpic();
        },
        computed: {
            filterResult() {
                return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
            }
        },
    });

</script>

</html>